<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/elements/dom-if.html">
<link rel="import" href="../../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="input.html">
<link rel="import" href="theme.html">

<dom-module id="hakuneko-menu">

    <template>
        <style include="theme"></style>
        <style>
            :host {
                background-color: var(--menu-control-background-color);
            }
            a {
                text-decoration: none;
            }
            .item {
                margin: 0.25em;
                cursor: pointer;
            }
            .title {
                font-weight: bold;
                font-size: 1.5em;
                color: var(--menu-control-title-color);
            }
            .popup {
                flex-direction: column;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                border: var(--menu-control-border);
                background-color: var(--menu-control-background-color);
                padding: 0em;
                margin: 0.5em;
                border-radius: 0em;
                -webkit-box-shadow: var(--menu-control-shadow);
                   -moz-box-shadow: var(--menu-control-shadow);
                        box-shadow: var(--menu-control-shadow);
                z-index: 1;
            }
            .show {
                display: flex;
            }
            .hide {
                display: none;
            }
            .separator {
                font-weight: bold;
                color: var(--menu-control-category-color);
                border-bottom: var(--menu-control-separator);
                /*margin-bottom: 0.5em;*/
                padding-left: 0.5em;
                padding-top: 0.5em;
                padding-bottom: 0.25em;
                text-transform: uppercase;
            }
            .about {
                display: flex;
                margin: 0.5em;
            }
            .logo {
                flex: 0;
            }
            .logo img {
                border: var(--menu-control-border);
            }
            .info {
                flex: 1;
                margin-left: 0.5em;
            }
            .credits {
                background-color: var(--menu-credits-background-color);
                padding: 0.5em;
                border: var(--menu-control-border);
                margin-bottom: 0.5em;
            }
            .people {
                width: 100%;
            }
            .people td {
                vertical-align: top;
                padding-right: 0.5em;
            }
            .settings {
                flex: 1;
                overflow-y: scroll;
                background-color: var(--menu-settings-background-color);
                padding: 0.5em;
            }
            td {
                white-space: nowrap;
                overflow-x: hidden;
                border-bottom: var(--menu-settings-row-border);
            }
            .group {
                font-weight: bold;
                color: var(--menu-control-category-color);
                padding: 0.5em;
                text-align: center;
                text-transform: uppercase;
            }
            .link {
                color: var(--menu-credits-link-color);
            }
            .button {
                cursor: pointer;
                -webkit-app-region: no-drag;
            }
            .right {
                float: right;
            }
            .buttons {
                display: flex;
            }
            .buttonsLeft {
                flex: 1;
                text-align: left;
            }
            .buttonsRight {
                flex: 1;
                text-align: right;
                white-space: nowrap;
            }
            #importFile {
                display: none;
            }
        </style>
        <i class="fas fa-fw fa-bars fa-2x item button" title="Toggle menu" on-click="togglePopup"></i>
        <span class="title">HakuNeko</span>
        <span class="right">
        <i class="far fa-fw fa-window-minimize item button" title="Minize HakuNeko" onclick="minimizeWindow()"></i>
        <i class="far fa-fw fa-window-maximize item button" title="Maximize HakuNeko" onclick="maximizeWindow()"></i>
        <i class="far fa-fw fa-2x fa-window-close item button" title="Close HakuNeko" onclick="closeWindow()"></i>
        </span>
        <div class$="popup [[ getPopupClass(popupVisibility) ]]">
            <div class="separator">
                <label>About</label>
            </div>
            <div class="about">
                <div class="logo">
                    <img src="./img/logo_m.png"/>
                </div>
                <div class="info">
                    <div class="credits">
                        <div>
                            &copy; [[ year ]]
                            <a class="link button" on-click="openWindow" title="https://git.io/hakuneko" data-href="https://git.io/hakuneko">
                                HakuNeko
                            </a>
                            rev.
                            <a class="link button" on-click="openWindow" title="Revision History" data-href$="[[ version.revision.link ]]">
                                [[ version.branch.label ]]@[[ version.revision.label ]]
                            </a>
                            <hr>
                        </div>
                        <table class="people" cellpadding="2" cellspacing="0">
                            <tr>
                                <td width="1">Development:</td>
                                <td>
                                    <a class="link button" on-click="openWindow" data-href="https://github.com/orgs/manga-download/people">Maintainers</a><br>
                                    <a class="link button" on-click="openWindow" data-href="https://github.com/manga-download/hakuneko/graphs/contributors">Contributors</a>
                                </td>
                            </tr>
                            <tr>
                                <td width="1">Artwork:</td>
                                <td>
                                    <a class="link button" on-click="openWindow" data-href="https://www.deviantart.com/hakuneko3kune">HakuNeko3Kune</a>
                                </td>
                            </tr>
                            <tr>
                                <td width="1">Help & Info:</td>
                                <td style="font-size: 1.5em; padding-top: 0.25em;">
                                    <i class="fas fa-fw fa-home button" on-click="openWindow" title="Visit the HakuNeko Homepage" data-href="https://hakuneko.download"></i>
                                    <i class="fas fa-fw fa-book button" on-click="openWindow" title="Read the Online Documentation" data-href="https://hakuneko.download/docs/interface/"></i>
                                    <i class="fas fa-fw fa-bug button" on-click="openWindow" title="Open a Ticket on GitHub" data-href="https://hakuneko.download/docs/troubleshoot/"></i>
                                    <i class="fab fa-fw fa-discord fa-flip-horizontal button" on-click="openWindow" title="Login to the Community Support Channel" data-href="https://discordapp.com/invite/A5d3NDf"></i>
                                    <i class="fas fa-fw fa-street-view button" on-click="openWindow" title="Show your external IP and Geolocation" data-href="https://ipinfo.io/json"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="separator">
                <label>Settings</label>
            </div>
            <div class="settings">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <template is="dom-repeat" items="[[ settingCategories ]]">
                        <tr>
                            <td colspan="2" class="group">
                                <label>[[ item.category ]]</label>
                            </td>
                        </tr>
                        <template is="dom-repeat" items="[[ item.settings ]]">
                            <tr>
                                <td width="1">
                                    <label title="[[ item.description ]]"><i class="fas fa-fw fa-info-circle"></i> [[ item.label ]] </label>
                                </td>
                                <td>
                                    <hakuneko-input item="{{ item }}"></hakuneko-input> 
                                </td>
                            </tr>
                        </template>
                    </template>
                </table>
            </div>
            <div class="buttons">
                <div class="buttonsLeft">
                    <i class="fas fa-file-import fa-2x item button" title="Import bookmarks" on-click="import"></i>
                    <input type="file" id="importFile" accept="application/x-sqlite3,.db,.db3" on-change="onImport" />
                </div>
                <div class="buttonsRight">
                    <i class="fas fa-check-circle fa-2x item button" title="Save settings and close menu" on-click="closeSaveChanges"></i>
                    <i class="fas fa-times-circle fa-2x item button" title="Close menu without saving settings" on-click="closeDiscardChanges"></i>
                </div>
            </div>
        </div>
    </template>

    <script>
        class HakunekoMenu extends Polymer.Element {

            static get is() {
                return 'hakuneko-menu';
            }

            static get properties() {
                return {};
            }

            ready() {
                super.ready();
                this.year = (new Date()).getFullYear();
                this.version = Engine.Version;
                this.popupVisibility = false;
                this.settingCategories = Engine.Settings.getCategorizedSettings();
            }

            getPopupClass(visibility) {
                return (visibility ? 'show' : 'hide');
            }

            async togglePopup() {
                let visible = !this.popupVisibility;
                if(visible) {
                    this.set('settingCategories', Engine.Settings.getCategorizedSettings());
                } else {
                    this.set('settingCategories', []);
                }
                this.set('popupVisibility', visible);
            }

            closeDiscardChanges() {
                Engine.Settings.load();
                this.set('settingCategories', []);
                this.set('popupVisibility', false);
            }

            closeSaveChanges() {
                Engine.Settings.save();
                this.set('settingCategories', []);
                this.set('popupVisibility', false);
            }

            /**
             * Open a new window and always disable the "Stay or Leave" confirmation,
             * otherwise the window cannot be closed anymore (electron does not show the confirmation).
             */
            openWindow(event) {
                let popup = window.open(event.target.dataset.href, '', 'frame=true,nodeIntegration=no');
                // disable onbeforeunload periodically (in case of navigation) to prevent blocking window close
                let watchdog = setInterval(() => {
                    if(popup.closed) {
                        clearInterval(watchdog);
                    } else {
                        let script = `
                            // loal scope for variable declaration
                            {
                                window.onbeforeunload = evt => undefined;
                                let warning = document.querySelector('div.unsupported-browser');
                                if(warning) {
                                    warning.parentNode.removeChild(warning);
                                }
                                let signup = document.querySelector('div.signup-prompt');
                                if(signup) {
                                    signup.parentNode.removeChild(signup);
                                }
                            }
                        `;
                        popup.eval(script);
                    }
                }, 500);
            }

            import(event) {
                this.$.importFile.click();
            }

            onImport(event) {
                try {
                    Engine.BookmarkManager.importBookmarks(event.target.files[0]);
                } catch(error) {
                    alert(error.message);
                } finally {
                    // reset input file field or it cannot be used again
                    this.$.importFile.value = null;
                }
            }

        }
        window.customElements.define(HakunekoMenu.is, HakunekoMenu);
    </script>

</dom-module>